<!DOCTYPE HTML>

<html>
	<head>
		<title>lost and found</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/main.css" />
		<script src="${request.contextPath}/assets/js/jquery-1.11.0.js"></script>
		<script>

            function addLost1(){
                var formData = new FormData($("#form1")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
                $.ajax({
                    async: false,
                    url : "/addLost",
                    type : 'POST',
                    data : formData,
                    processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false,  //必须false才会自动加上正确的Content-Type
                    success : function(result) {
                        alert(result);
                        window.location.reload();
                    }
                });
            }


            function addLost2(){
                var formData = new FormData($("#form2")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
                $.ajax({
                    async: false,
                    url : "/addFound",
                    type : 'POST',
                    data : formData,
                    processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false,  //必须false才会自动加上正确的Content-Type
                    success : function(result) {
                        alert(result);
                        window.location.reload();
                    }
                });
            }

            function thanks(){
                var formData = new FormData($("#form3")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
                $.ajax({
                    async: false,
                    url : "/thanks",
                    type : 'POST',
                    data : formData,
                    processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false,  //必须false才会自动加上正确的Content-Type
                    success : function(result) {
                        alert(result);
                        window.location.reload();
                    }
                });
            }


            function publish(marknumber) {
                if(marknumber == 1) {
                    con = "<form name = 'form1' id = 'form1'>" +
							"丢失的东西:<input type='text' name = 'lostthings' id = 'lostthings'/>" +
							"<br>" +
							"丢失的地址:<input type='text' name = 'lostaddress' id = 'lostaddress'/>" +
							"<br>" +
							"丢失的时间:<input type='text' name = 'lostdate' id = 'lostdate'/>" +
							"<br>" +
							"联系人:<input type='text' name = 'contract' id = 'contract'/>" +
							"<br>" +
							"联系人电话:<input type='text' name = 'telephone' id = 'telephone'/>" +
							"</form>" +
							"<button id='submitPublishLost1' value='提交' name = 'submitPublishLost1' onclick='addLost1()'>提交</button>"
					document.getElementById("markid").innerHTML=con;
				}
				else if(marknumber == 2) {
                    con = "<form name = 'form2' id = 'form2'>" +
                            "拾到的东西:<input type='text' name = 'foundthings' id = 'foundthings'/>" +
                            "<br>" +
                            "拾到的地址:<input type='text' name = 'foundaddress' id = 'foundaddress'/>" +
                            "<br>" +
                            "拾到的时间:<input type='text' name = 'founddate' id = 'founddate'/>" +
                            "<br>" +
                            "联系人:<input type='text' name = 'contract' id = 'contract'/>" +
                            "<br>" +
                            "联系人电话:<input type='text' name = 'telephone' id = 'telephone'/>" +
                            "</form>" +
                            "<button id='submitPublishLost2' value='提交' name = 'submitPublishLost2' onclick='addLost2()'>提交</button>"
                    document.getElementById("markid").innerHTML=con;
				}
				else if(marknumber == 3) {
                    con = "<form name = 'form3' id = 'form3'>" +
                            "感谢的人:<input type='text' name = 'tusername' id = 'tusername'/>" +
                            "<br>" +
                            "内容:<input type='text' name = 'thankscontext' id = 'thankscontext'/>" +
                            "</form>" +
                            "<button id='submitPublishLost3' value='提交' name = 'submitPublishLost3' onclick='thanks()'>提交</button>"
                    document.getElementById("markid").innerHTML=con;
				}
            }
		</script>
	</head>
	<body>

		<!-- Header -->
			<header id="header" class="alt">
				<div class="logo"><a href="index.html">LOST AND FOUND</span></a></div>
				<#--<a href="#menu" class="toggle"><span>菜单</span></a>-->
			</header>

		<!-- Nav -->
			<#--<nav id="menu">
				<ul>
					&lt;#&ndash;<li><a href="http://localhost:8020/home">主页</a></li>&ndash;&gt;
					&lt;#&ndash;<li><a href="http://localhost:8020/elements">其他功能。。。。</a></li>&ndash;&gt;
                    <li>
						<input type="text" name="lostname" id="lostname"/>
                        <a href="#one" class="button special scrolly">查询</a>
					</li>
				</ul>
			</nav>-->

		<!-- Banner -->
		<!--
			To use a video as your background, set data-video to the name of your video without
			its extension (eg. ${request.contextPath}/images/banner). Your video must be available in both .mp4 and .webm
			formats to work correctly.
		-->
			<section id="banner" data-video="${request.contextPath}/images/banner">
				<div class="inner">
					<h1>失物招领</h1>
					<#--<p><br />
					built by <a href="https://templated.co/">Templated</a> and released under the <a href="https://templated.co/license">Creative Commons</a>.</p>
					<a href="#one" class="button special scrolly">Get Started</a>-->
				</div>
			</section>


        <SCRIPT>
            function isHidden(oDiv){
                var vDiv = document.getElementById(oDiv);
                vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';
            }
            function isHidden1(oDiv){
                var vDiv = document.getElementById(oDiv);
                vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';
            }


            function isHidden(oDiv) {
            	if(oDiv == "lost"){
                    var vDiv = document.getElementById("lost");
                    vDiv.style.display = /*(vDiv.style.display == 'none')?'block':*/'none';
                    var vDiv1 = document.getElementById("found");
                    vDiv1.style.display = /*(vDiv.style.display == 'none')?*/'block'/*:'none'*/;
				}
				else if(oDiv == "found") {
                    var vDiv = document.getElementById("found");
                    vDiv.style.display = /*(vDiv.style.display == 'none')?'block':*/'none';
                    var vDiv1 = document.getElementById("lost");
                    vDiv1.style.display = /*(vDiv.style.display == 'none')?*/'block'/*:'none'*/;
				}
			}

        </SCRIPT>
		<!-- One -->
			<section id="one" class="wrapper style2">
				<div class="inner">
					<div>
						<div class="box">
                            <DIV style="cursor:hand" onclick="isHidden('found')"><b><button>查看丢失内容</button></b></DIV>
                            <DIV style="cursor:hand" onclick="isHidden('lost')"><b><button>查看拾到内容</button></b></DIV>
							<div class="content" id="lost">
								<header class="align-center">
									<h2>丢失信息列表</h2>
									<p>----------本网站没有义务保证使用者身份---------------</p>
								</header>
								<hr />
								<table border="1">
									<tr bgcolor="black">
										<td>
                                            <strong>丢失物品:</strong>
										</td>
                                        <td>
                                            <strong>丢失地点:</strong>
                                        </td>
                                        <td>
                                            <strong>丢失时间:</strong>
                                        </td>
                                        <td>
                                            <strong>联系人:</strong>
                                        </td>
                                        <td>
                                            <strong>联系电话:</strong>
                                        </td>
									</tr>
								<#if lostInfoList??>
									<#list lostInfoList as list>
									<tr>
                                        <td>
                                            <p>${list.lostthings}</p>
                                        </td>
                                        <td>
                                            <p>${list.lostaddress}</p>
                                        </td>
                                        <td>
                                            <p>${list.lostdate}</p>
                                        </td>
                                        <td>
                                            <p>${list.contract}</p>
                                        </td>
                                        <td>
                                            <p>${list.telephone}</p>
                                        </td>
									</tr>
									</#list>
								</#if>
								</table>
							</div>


                            <div class="content" id="found" style="display:none">
                                <header class="align-center">
                                    <h2>拾到信息列表</h2>
                                    <p>----------本网站没有义务保证使用者身份---------------</p>
                                </header>
                                <hr />
                                <table border="1">
                                    <tr bgcolor="black">
                                        <td>
                                            <strong>拾到物品:</strong>
                                        </td>
                                        <td>
                                            <strong>拾到地点:</strong>
                                        </td>
                                        <td>
                                            <strong>拾到时间:</strong>
                                        </td>
                                        <td>
                                            <strong>联系人:</strong>
                                        </td>
                                        <td>
                                            <strong>联系电话:</strong>
                                        </td>
                                    </tr>
								<#if foundInfoList??>
									<#list foundInfoList as list>
                                        <tr>
                                            <td>
                                                <p>${list.foundthings}</p>
                                            </td>
                                            <td>
                                                <p>${list.foundaddress}</p>
                                            </td>
                                            <td>
                                                <p>${list.founddate}</p>
                                            </td>
                                            <td>
                                                <p>${list.contract}</p>
                                            </td>
                                            <td>
                                                <p>${list.telephone}</p>
                                            </td>
                                        </tr>
									</#list>
								</#if>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        <!-- Two -->
			<section id="two" class="wrapper style3">
				<div class="inner">
					<div id="flexgrid">
						<div>
							<ul class="actions">
								<li><a href="javascript:publish(1)" class="button alt">发布丢失信息</a></li>
							</ul>
						</div>
						<div>
							<ul class="actions">
								<li><a href="javascript:publish(2)" class="button alt">发布拾到信息</a></li>
							</ul>
						</div>
						<div>
							<ul class="actions">
								<li><a href="javascript:publish(3)" class="button alt">发布感谢信息</a></li>
							</ul>
						</div>
					</div>
				</div>
			</section>


		<!-- Three -->
        <p id="markid">



        </p>

		<!-- Four -->
			<section id="four" class="wrapper style3">
				<div class="inner">

					<header class="align-center">
						<h2>实名制 感谢</h2>
						<p>${thanks.tusername}</p><br>
                        <p>${thanks.thankscontext}</p>
					</header>

				</div>
			</section>

		<!-- Footer -->
			<footer id="footer" class="wrapper">
				<div class="inner">
					<section>
						<div class="box">
							<div class="content">
								<h2 class="align-center">发邮件给后台人员</h2>
								<hr />
								<form  id="insertEmailForm" name="insertEmailForm">
									<div class="field half first">
										<label for="name">您的姓名</label>
										<input name="name" id="name" type="text" placeholder="Name">
									</div>
									<div class="field half">
										<label for="email">您的邮件</label>
										<input name="email" id="email" type="email" placeholder="Email">
									</div>
									<div class="field">
										<label for="dept">所在公寓</label>
										<div class="select-wrapper">
											<select name="dept" id="dept">
												<option value="">五号楼</option>
												<option value="1">三号楼</option>
												<option value="1">四号楼</option>
												<option value="1">一号楼</option>
												<option value="1">二号楼</option>
											</select>
										</div>
									</div>
									<div class="field">
										<label for="message">信息内容</label>
										<textarea name="message" id="message" rows="6" placeholder="Message"></textarea>
									</div>
									<ul class="actions align-center">
                                        <li><button value="发送" class="button special" onclick="insertEmail()">发送</button></li>
									</ul>
								</form>
							</div>
						</div>
					</section>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="${request.contextPath}/assets/js/jquery.min.js"></script>
			<script src="${request.contextPath}/assets/js/jquery.scrolly.min.js"></script>
			<script src="${request.contextPath}/assets/js/jquery.scrollex.min.js"></script>
			<script src="${request.contextPath}/assets/js/skel.min.js"></script>
			<script src="${request.contextPath}/assets/js/util.js"></script>
			<script src="${request.contextPath}/assets/js/main.js"></script>



            <script>

                function insertEmail(){
                    var formData = new FormData($("#insertEmailForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
                    $.ajax({
                        async: false,
                        url : "/insertEmail",
                        type : 'POST',
                        data : formData,
                        processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
                        contentType : false,  //必须false才会自动加上正确的Content-Type
                        success : function(result) {
                            alert(result);
                        }
                    });
                }

            </script>

	</body>



</html>